概念

在 CSS 的世界中，所有東西都是以 box 的形式 顯示在畫面上，一段普通的文字甚至是一個套用 border-radius 而長得像圓的元素，它們的本質都是一個四四方方 box！而這個 box 會根據我們設定的 display 屬性、設定的維度以及所包含的內容物，而呈現不同的樣貌。

尺寸的種類

尺寸可以分成兩種類型：

• Extrinsic：外部指定的尺寸，會限制內部 content 的呈現，如果空間不夠會犧牲 content，content 要去配合外部容器。
• Intrinsic：類似 box 向內部 content 問 "你需要多大的空間"，讓外部 box 可以動態彈性調整。

如果在父元素使用 width: 200px heiight: 200px，這就是 extrinsic 尺寸，限縮子元素的尺寸。當子元素尺寸大於外部 box 時，會超出到父元素的 border box 外，造成 overflow，除了使用 overflow 屬性設定相關行為外，還有一種方式是 "讓 box 的尺寸為 intrinsic"，也就是不設定特定寬高，或是設定成 min-content。

如果設定 width: min-content，則是告訴 box "內容物的最小寬就是你的寬度"，而當 box 有多個內容物時，則是先找出每一個內容物的最小寬，然後挑最大值設定成 box 的寬度。

例如：

<div class="container">
 Lorem ipsum, dolor sit amet consecteturfffggggggg adipisicing elit. Quo sit corrupti at veritatis explicabo mollitia commodi numquam blanditiis repudiandae ea adipisci dolore optio eius harum tenetur aliquam vitae, reiciendis nobis!
</div>

.container {
  border: 1px solid black;
  width: min-content;
}

會找出最長的英文單字(英文以一個詞為單位，不切斷字母) consecteturfffggggggg，並以它的寬作為 div 的寬度

如果同樣的 CSS，但把 HTML 換成：

<div class="container">
 央跑請讀玩鴨虎葉竹眼着筆自夏裏公可吃哥童止水主造有吃亮肉肉八課牠早五少節新皮那到布象許步用土只內出圓
</div>

因為中文字的單位是一個方塊字，所以會以單個字寬作為 div 的寬度

而如果是中文夾雜，那就是找出每個內容的最小寬，取出最大值來設定

<div class="container">
 央跑請讀玩鴨虎葉竹眼着筆自夏裏公可吃哥童止水主造有吃亮肉肉八課牠早五少節新皮那到布象許步用土只內出圓
  Lorem ipsum, dolor sit amet consecteturfffggggggg adipisicing elit. Quo sit corrupti at veritatis explicabo mollitia commodi numquam blanditiis repudiandae ea adipisci dolore optio eius harum tenetur aliquam vitae, reiciendis nobis!
</div>

假設這段文字中，最長的英文單字寬為 172px，中文單字為 18px，則最後會使用 172px 作為外部 div 的寬。

英文：不截斷字母，會找最長的單字
中文：每一個方塊字為最小寬

box model 的範圍和組成

由內而外依序是：content box - padding box - border box - margin box

• content box：實際內容放置的位置
• padding box：包覆著 content box，scroll bar 會佔據這裡的空間，只能單純定義空間大小，無法設定樣式
• border box：包覆著 padding box，用來框出元素的邊界 可以設定樣式，或是用 border-image 設定圖片或是
• margin box：box 周圍的空間，outline、box-shadow 會佔據這裡的空間

使用 box-sizing 可以用來告訴 box 要如何計算自己本身的大小，所有的元素預設都是 box-sizing: content-box，也就是設定的寬高值會套用在 content box 上，如果再增加 padding 或是 border 樣式，尺寸會再往外加，如果設定成 box-sizing: border-box 寬度則會套用在 border box 上，也就是畫面上所實際看到的尺寸，依序扣掉 border、padding，最後再把剩下的空間給 content box。
而為了方便使用一般都會在 CSS 的 reset 或是 normalize 中再加上

*,
*::before,
*::after {
  box-sizing: border-box;
}

＊曾經 CSS WG 中 有 box-sizing: padding-box，Firefox 是唯一一個有實作且支援的瀏覽器，但隨在這項屬性值在 CSS 規範中移除後，2016 釋出的 Firefox 50，也移除了 box-sizing: padding-box 的支援

參考資源

MDN Web Docs - box-sizing
Firefox 50 for developers